import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { List } from 'antd';

class PageList extends Component {

	componentWillReceiveProps(nextProps) { // nextProps是接收参数变化后的值，切换不同页面获取到的数据props会发生改变，就会触发子组件的componentWillReceiveProps生命周期函数
		const id = nextProps.match.params.id;
		axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
			.then(res => {
				this.setState({
					data: res.data.data
				});
			})
	}

	constructor(props) {
		super(props);
		this.state = {
			data: []
		}
	}

	render() {
		return (
			<List
				style={{background: '#fff'}}
	      		bordered
	      		dataSource={this.state.data}
	      		renderItem={item => (
	      			<List.Item>
	      				<Link to={`/detail/${item.id}`}>{item.title}</Link> {/*新闻列表的每一项点击跳转到对应的详情页，使用id来区分详情页*/}
	      			</List.Item>
	      		)}
	    	/>
		)
	}

	componentDidMount() { // 页面渲染第一次显示路由对应的列表页
		let url = 'http://www.dell-lee.com/react/api/list.json';
		const id = this.props.match.params.id; /*获取父组件中路由传递过来的参数id，切换不同页面获取到的数据props会发生改变，就会触发子组件的componentWillReceiveProps生命周期函数*/
		if (id) { // 防止id为undefined
			url = url + '?id=' + id; /*通过切换不同页面获取到的不同id，来获取对应页面的后台的数据*/
		}
		axios.get(url)
			.then(res => {
				this.setState({
					data: res.data.data
				});
			})
	}

}

export default PageList;